<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>demom</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

    div{
        width: 100px;
        height: 100px;
        background-color: darkorange;
        position: absolute;
        margin-top:10px;
		/* border:10px solid ; */
		/* padding-left: 10px; */
    }


</style>
</head>

<body>

	<div id="div1">
	</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<script type="text/javascript">

//clientY----获取鼠标在整个页面的位置（跟随滚动变化）
//offset().top---元素的最顶部的位置距离最网页最顶部的最近距离（margin计算在内）
//pageY------为鼠标位置距离页面最顶部的 Y 轴距离（margin计算在内）

	$(function(){
        $("div").mousedown(function(ev){
			

			//  == div盒子右边距离 减去 div左边到页面左边的距离
			//offsetX 就是鼠标到div左边的距离(边框值当作空白处理)
            var offsetX = ev.pageX - $(this).offset().left

            var offsetY = ev.pageY - $(this).offset().top

			

/* 	 		var _this = this
			$(document).mousemove(function(ev){
				$(_this).css({
					//尝试加假如你把 offsetX 取消的话，会发现left值等于鼠标位置
					//导致的结果就是div的左边界线等于鼠标位置（就是点击div中间时会自动把left等于ev.pageX）
					left :ev.pageX - offsetX ,
					top : ev.pageY - offsetY
				})
			})
			
		//鼠标松开后，将鼠标拖动div元素的方法取消
			$(document).mouseup(function(){
				$(document).off("mousemove")
			})

 */

        })
 









	})




</script>


</body>

</html>